import * as echarts from "../../ec-canvas/echarts";
var getOneSeriesOption = require("./oneSeriesOption.js");
Component({
  options: {},
  /**
   * 组件的属性列表
   */
  properties: {
    // 数据源
    allData: {
      type: Object,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    bar: {
      lazyLoad: true, // 延迟加载
    },
    colorList: ["#64C38F", "#568AC5", "#9A78B9", "#E0AE60"], // 图形的颜色
  },

  lifetimes: {
    created: function () {
      // 在组件实例刚刚被创建时执行
      console.log("子组件————————created");
    },
    attached: function () {
      // 在组件实例进入页面节点树时执行
      console.log("子组件————————attached");
    },
    ready: function () {
      // 在组件在视图层布局完成后执行
      console.log("子组件————————ready");
      const _this = this;
      setTimeout(function () {
        console.log(_this.data.allData, "allData");
        _this.selData();
      }, 500);
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
      console.log("子组件————————detached");
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    selData () {
      // 处理下series（Y轴的数据）
      let series = [];
      this.data.allData.yData.forEach((val, index) => {
        series.push({
          name: this.data.allData.years[index],
          data: val,
          type: this.data.allData.type,
          color: "#67A8F8", //线的颜色
          // symbol: "none", //去掉折线图中的节点
          // smooth: true, //true 为平滑曲线，false为直线
          // itemStyle: {
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //     //图形渐变
          //     { offset: 0, color: "#d9a8f2" },
          //     { offset: 0.5, color: "#b31fff" },
          //     { offset: 1, color: "#5c1cff" },
          //   ]),
          // },
          // symbolSize: 3, //一定要加这个字段才能显示
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },

        });
      });
      let data = {
        xData: this.data.allData.xData,
        years: this.data.allData.years,
        series: series,
        title: this.data.allData.title,
      };
      this.setData({
        initData: data,
      });
      console.log(this.data.initData, "initData");
      this.barComponent = this.selectComponent("#mychart-dom-bar");
      this.init_bar(this.data.initData);
    },
    //初始化柱状图
    init_bar (initData) {
      this.barComponent.init((canvas, width, height, dpr) => {
        // 初始化图表
        const barChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr, // 加上这一行即可解决模糊问题
        });
        barChart.setOption(getOneSeriesOption.getOption(initData));
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return barChart;
      });
    },
  },
});
